<template>
  <div class="huzhao-dialog">
  
    <el-dialog title="外事证件" 
      :visible.sync="dialogVisible" 
      :lock-scroll='lockGao'
      @open='sendAjax'
      @close="$emit('update:dialogShowIf', false)"
       top='15vh'
       >
  
      <section class='huzhao-dialog-body'>
        <ul>
          <li v-for='(k,i) in dataList' :key='i'>
            <div class='titles' :class="handleLiColor(k.passportType,k.useStatus)">
              <div class = 'titles-left'>{{k.useStatus | handleUseStatus}}</div>
               <div class = 'titles-middle'>
                <h2 class='titles-middle-type'>{{k.passportType | handlePassportType }} <span>{{k.stockStatus | handleStockStatus}}</span></h2>
                <div class='titles-middle-time'>
                  <span>证件号&nbsp;&nbsp;{{k.passportId}}</span>
                  <span>签发日期&nbsp;&nbsp;&nbsp;{{k.issueTime | handleTime}}</span>
                  <span :class='handlTimeOut(k.realEffectTime)'>有效日期&nbsp;&nbsp;&nbsp;{{k.realEffectTime | handleTime}}</span>
                </div>
              </div> 
              <div v-if='k.visaInfos.length' class = 'titles-right' @click.stop = 'handleExpand(i)'>
                查看签证 <i class='el-icon-caret-bottom' :class='{rotate:visible[i]}'></i>
              </div>
              <div v-else style='cursor:not-allowed' class = 'titles-right'>
                暂无签证
              </div>
            </div>
            <el-collapse-transition :key='i'>
                 
              <ul class='content' v-show='visible[i]'>

                <li v-for='(q,e) in k.visaInfos' :key='e'>
                  <div class='country'>{{q.country}}</div>
                  <div class='time'>
                    <span :class='handlTimeOut(q.outTime)'>失效日期 </span>&nbsp;<span :class='handlTimeOut(q.outTime)'> {{q.outTime | handleTime}}</span>
                  </div>
                  <div class='number'>
                    签注号: {{q.visaId}}
                  </div>
                </li> 
              </ul>

            </el-collapse-transition>
          </li>
        </ul>
  
      </section>
       
    </el-dialog>
  
  </div>
</template>

<script>
import Vue from 'vue';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';

import { Dialog } from 'element-ui';

Vue.use(Dialog);
Vue.component(CollapseTransition.name, CollapseTransition);

export default {
  data() {
    return {
      dialogVisible: false,
      dataList: [],
      visible: [],
      lockGao:false,
    };
  },

  filters: {
    handleTime: function(value) {
      if (value.length >= 10) {
        value = value.substring(0, 10);
      }
      return value;
    },
    handleUseStatus(val) {
      switch (val) {
        case '0':
          return '有效';

          break;

        case '1':
          return '过期';

          break;

        case '2':
          return '新发';

          break;

        case '3':
          return '注销';

          break;

        case '4':
          return '丢失';

          break;
      }
    },

    handlePassportType(val) {
      switch (val) {
        case '1':
          return '因公护照';
          break;
        case '2':
          return '因公港澳证';
          break;
        case '3':
          return '赴台证';
          break;
        case '4':
          return '因私护照';
          break;
        case '5':
          return '因私港澳证';
          break;
      }
    },
    handleStockStatus(val) {
      switch (val) {
        case '0':
          return '在库';
          break;
        case '1':
          return '借出';
          break;

        case '2':
          return '返还';
          break;
      }
    }
  },
  watch: {
    dialogShowIf(newValue, oldValue) {
      this.dialogVisible = newValue;
    }
  },

  props: {
    dialogShowIf: {
      type: Boolean,

      default: false
    }
  },

  methods: {
    handlTimeOut(time) {
      if (!time) return;

      if (time.length >= 10) {
        time = time.substring(0, 10);
      }

      const now = parseInt(new Date().getTime() / 1000);
      const date = parseInt(new Date(time).getTime() / 1000);
      const day = parseInt((date - now) / 3600 / 24);
      if (day <= 90) {
        return 'red';
      }
    },

    handleLiColor(type, status) {
      if (status == 1 || status == 3 || status == 4) {
        return 'type4';
      }

      switch (type) {
        case '1':
          return 'type1';
          break;
        case '2':
          return 'type2';
          break;
        case '3':
          return 'type3';
          break;
      }
    },
    sendAjax() {
      this.Axios.Post(this.URL.getZsjPassportAndVisaInfo.url).then(res => {
        this.dataList = res.data.datas;
        this.dataList.forEach((ele, i) => {
          if (ele.visaInfos.length) {
            this.visible.push(true);
          } else {
            this.visible.push(false);
          }
        });
      });
    },
    handleExpand(i) {
      this.visible.splice(i, 1, !this.visible[i]);
    }
  }
};
</script>

<style lang='less'>
.huzhao-dialog {
  .el-dialog--small {
    width: 63%;
  }
  ::-webkit-scrollbar {
    width: 0px;
  }
  .huzhao-dialog-body {
    max-height: 460px;
    overflow: auto;
    & > ul {
      & > li {
        margin-bottom: 16px;
        .titles {
          border-radius: 4px;
          color: #fff;
          height: 80px;
          overflow: hidden;
          & > div {
            float: left;
          }
          .titles-left {
            border-radius: 50%;
            position: relative;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            height: 46px;
            width: 46px;
            line-height: 48px;
            font-size: 12px;
            text-align: center;
            text-indent: -1px;
            background-color: rgba(0, 0, 0, 0.16);
            word-break: keep-all; /* 不换行 */
            white-space: nowrap;
          }
          .titles-middle {
            padding-left: 24px;
            .titles-middle-type {
              padding: 12px 0 8px 10px;
              font-size: 16px;
              span {
                margin-left: 10px;
                font-size: 13px;
                display: inline-block;
                padding: 2px 10px;
                background-color: rgba(0, 0, 0, 0.16);
                border-radius: 12px;
                font-weight: normal;
              }
            }

            .titles-middle-time {
              span {
                float: left;
                margin-right: 24px;
                margin-left: 10px;
              }
              span.red {
                color: #d14d4d;
              }
            }
          }

          .titles-right {
            cursor: pointer;
            float: right;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            width: 15%;
            i {
              transition: transform 0.4s;
              margin-left: 3px;
            }
            i.rotate {
              transform: rotate(180deg);
            }
          }
        }

        .titles.type1 {
          // background-color: #5eb3f9;
          background-color: #5eb3f9;
        }

        .titles.type2 {
          // background-color: #5eb3f9;
          background-color: #22bfc9;
        }

        .titles.type3 {
          // background-color: #5eb3f9;
          background-color: #a991f3;
        }

        .titles.type4 {
          // background-color: #5eb3f9;
          background-color: #b3b3b3;
        }

        .content {
          overflow: hidden;
          background-color: #f1f1f1;
          padding: 12px;
          border-radius: 0 0 12px 12px;
          & > li:nth-of-type(n + 2) {
          }
          & > li {
            width: 100%;
            height: 48px;
            line-height: 50px;
            border-radius: 15px;
            margin: 12px 0;
            background-color: #fff;
            & > div {
              float: left;
            }
            .country {
              width: 90px;
              font-size: 16px;
              color: #333;
              font-weight: bold;
              margin-right: 40px;
              text-align: right;
              word-break: keep-all; /* 不换行 */
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow: ellipsis;
            }

            .time {
              float: right;
              span {
                color: #666;
              }
              span:nth-of-type(2n) {
                margin-right: 30px;
                font-size: 15px;
                color: #333;
                font-weight: 550;
              }
              span.red {
                color: #d14d4d;
              }
            }
            .number {
              float: left;
              margin-right: 34px;
            }
          }
        }
      }
    }
  }
}
</style>
